<template>
  <div class='city'>
    <div class="header">
      <div class="home" @click='homefun'></div>
      <div class="titleText">选择城市</div>
    </div>
    <div class="cityContent">
      <div class="location">
        <p>定位/附近城市</p>
        <div class='LCcity'>
          <div class="box" @click='LCfun'>
            <div class="img"></div>
            <div class='LCcityText'>杭州</div>
          </div>
        </div>
      </div>
      <div class="history">
        <p>历史记录</p>
        <div class="HTcity" @click="HTfun">
          <p>{{$store.state.city}}</p>
        </div>
      </div>
      <div class="oneSection">
        <p>一级站点</p>
        <div class="OScity">
          <p v-for="(item,i) in oneSection" :key="i" @click="checkfun(item)" :class='{"check":item==$store.state.city}'>{{item}}</p>
        </div>
      </div>
      <div class="twoSection">
        <p>二级站点</p>
        <div class="TScity">
          <p v-for="(item,i) in twoSection" :key="i" @click="checkfun(item)" :class='{"check":item==$store.state.city}'>{{item}}</p>
        </div>
      </div>
      <div class="hotcity">
        <p>热门玩乐城市</p>
        <div class="HScity">
          <p v-for="(item,i) in hotcity" :key="i" @click="checkfun(item)" :class='{"check":item==$store.state.city}'>{{item}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'City',
  data () {
    return {
      oneSection: ['杭州', '广州', '上海', '北京', '成都'],
      twoSection: ['温州', '宁波', '无锡', '黄山', '合肥'],
      hotcity: ['舟山', '建德', '丽水', '洪山']
    }
  },
  methods: {
    homefun () {
      this.$router.push({
        path: '/'
      })
    },
    LCfun () {
      this.$router.push({
        path: '/'
      })
      this.$store.state.city = '杭州'
      localStorage.setItem('city', '杭州')
    },
    HTfun () {
      this.$router.push({
        path: '/'
      })
    },
    checkfun (ele) {
      this.$router.push({
        path: '/'
      })
      this.$store.state.city = ele
      localStorage.setItem('city', ele)
    }
  }
}
</script>
<style scoped lang='less'>
.header{
  display: flex;
  padding:0 15px;
  background-color: #f7f7f7;
  .home{
    width: 20px;
    height: 40px;
    background-image: url(/static/City/home.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .titleText{
    width: 64px;
    margin: auto;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
.cityContent{
  padding: 10px 0 10px 20px ;
  text-align:left;
  color:#999;
  &>div{
    &>p{
      margin-bottom: 10px;
    }
    &>div{
      margin-bottom:20px;
      display: flex;
      flex-wrap:wrap;
      &>p{
        color:#333;
        padding:8px 15px;
        background-color:#f4f4f4;
        border:1px solid transparent;
        width: 80px;
        height: 16px;
        line-height:16px;
        border-radius:20px;
        text-align:center;
        margin: 0 15px 10px 0;
      }
      .check{
        border:1px solid #fed61a;
        background-color:#fff7d1;
      }
    }
  }
  .LCcity{
    color:#333;
    padding:8px 15px;
    background-color:#f4f4f4;
    width: 80px;
    border-radius:20px;
    text-align:center;
    .box{
      width: 45px;
      margin:auto;
      display: flex;
      .img{
        width: 11px;
        height: 13px;
        margin: 1.5px 0;
        background-image: url(/static/City/point.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-right:6px
      }
      .LCcityText{
        height: 16px;
        line-height:16px;
      }
    }
  }
}
</style>
